<template>
  <div class="body">
    <div class="center">
      <div style="height: 10px"></div>
      <div class="login">
        <div class="pic">
          <img src="img/login/login-image-1.png" class="pic1" />
          <img src="img/login/login-image-2.png" class="pic2" />
          <img src="img/login/login-image-3.png" class="pic3" />
        </div>
        <div class="msg">
          <div class="user-title">
            <img src="img/login/user.png" alt="" />
            <span>登&nbsp;&nbsp;录</span>
          </div>
          <div class="reg">
            <span>还没有账号?</span>
            <router-link to="/register">立即注册</router-link>
          </div>
          <div class="form-group">
            <label for="email">用户名：</label>
            <input
              @focus="empty"
              v-model="name"
              type="text"
              placeholder="请输入用户名"
            />
          </div>
          <div
            id="div1"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <div class="form-group">
            <label for="phone">登录密码：</label>
            <input
              @focus="empty"
              v-model="upwd"
              type="text"
              placeholder="请输入密码"
            />
          </div>
          <div
            id="div2"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <div class="form-group">
            <label for="phone">确认密码：</label>
            <input @focus="empty" v-model="re_upwd" type="text" placeholder="请再次输入密码" />
          </div>
          <div
            id="div3"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <button @click="login">点击登录：</button>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      upwd: "",
      re_upwd:'',
    };
  },
  methods: {
    empty() {
      div1.innerHTML = "";
      div2.innerHTML = "";
      div3.innerHTML = "";
    },
    login() {
      this.axios
        .get(`/user/login?user_name=${this.name}&upwd=${this.upwd}`)
        .then((res) => {
          console.log("登录:", res);
          if(this.re_upwd==this.upwd){
             if (res.data.code == 200) {
            alert("登录成功");
          } else if (res.data.code == 201) {
            div1.innerHTML = "用户名不能为空";
          } else if (res.data.code == 202) {
            div2.innerHTML = "密码不能为空";
          }
          }else{
            div3.innerHTML = '请确保密码和确认密码相同'
          }
         
          
        });
    },
  },
};
</script>
<style scoped src="../assets/css/login.css"></style>
<style lang="scss" scoped></style>
